<template>
   <div class="tw-libiframe" :class="{xnoclick: disableClick}">
     <iframe ref="iframe" :src="apiSrc.url || src" frameborder="0" :key="apiSrc.url || src" :style="{height:height}"></iframe>
   </div>
</template>

<script>
import props from './props'

export default {
  name: 'iframe',

  props,

  data() {
    return {
      height: '100%'
    }
  },

  methods: {
    setIframeHeight (e) {
      if (e) {
        this.height = e.data + 'px'
        this.$el.style.height = e.data + 'px'
      }
    },

    handleFitWindow() {
      const height = window.innerHeight - this.$el.getBoundingClientRect().top - parseInt(this.bottomOffset)
      this.height = height + 'px'
      this.$el.style.height = height + 'px'
      document.body.classList.add('xfitiframe')
      const footerEl = document.querySelector('.tw-libfooter')

      if (footerEl) {
        footerEl.classList.add('xfitiframe')
      }
    }
  },

  created () {
    if (this.autoHeight) {
      window.addEventListener('message', this.setIframeHeight)
    } else if (this.fitWindow) {
      window.addEventListener('resize', this.handleFitWindow)

      this.$nextTick(() => {
        this.handleFitWindow()
      })
    }
  },

  beforeDestroy () {
    window.removeEventListener('resize', this.handleFitWindow)
    window.removeEventListener('message', this.setIframeHeight)
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
